<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            height:400px;
            width:800px;
            border:5px solid red;
            margin:0 auto;
            display: flex;
        }
        .boxa{
            height:100px;
            width:200px;
            background-color: aqua;
            /* 扩展(600-200-100-100=200)---不看盒子大小放大
               默认值：0
               200/3=66.7
            */
            /* flex-grow: 1; */

            /* 压缩(200+100+100-200=200)---一定看盒子大小
               默认值：1
             */
            /* flex-shrink:1; */

            /* 基准值： auto 默认
               如果设置了基准值，盒子的大小就是基准值
               如果没设置基准值或者值auto,那就是width
            */
            /* flex-basis:300px; */

            /* flex-grow flex-shrink flex-basis */
            /* flex:0 1 auto; 默认 */
             /*auto： 1 1 auto */
             /* none (0 0 auto) */
            /*(1 1 0)
            flex:1; */

            /* 排序 值越小越靠前,默认0 */
            /* order:2; */
            /* flex:1 */
        }
        .boxb{
            height:100px;
            width:100px;
            background-color: blueviolet;
            /* flex-grow: 1; */
            /* flex-shrink:1; */
            /* order:3; */

            /* 单项侧轴对齐
               auto 默认
               flex-start
               flex-end
               center
               baseline
               stretch(没有高度)
             */
            /* align-self: stretch; */
            /* flex:1 */
        }
        .boxc{
            height:100px;
            width:100px;
            background-color: brown;
            /* flex-grow: 1; */
            /* flex-shrink:1; */
            /* order:1; */
            /* flex:1 */
        }
    </style>
</head>
<body>
    https://blog.csdn.net/wwwjjjjj666/article/details/128033184

    <div class="box">
        <div class="boxa">1</div>
        <div class="boxb">2</div>
        <div class="boxc">3</div>
    </div>
</body>
</html>